<template>
	<view>
		<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500">
			<swiper-item v-for="(item,index) in bannerlist" :key="index">
				<image class="swiper-item" :src="item"></image>
			</swiper-item>
		</swiper>
		<view class="pricebox" v-if="goodsinfo">
			<view class="numbox">
				<view class="leftbox">
					<view class="originalprice" v-if="goodsinfo.is_points_discount==0">
						<text>￥</text>{{goodsinfo.goods_price_min}}
					</view>

					<!-- 积分商品 -->
					<view class="originalprice" v-else>
						{{goodsinfo.goods_price_min}}<text>积分</text>
					</view>
					<view class="crossedprice" v-if="goodsinfo.is_points_discount==0&&goodsinfo.line_price_min>0">
						￥{{goodsinfo.line_price_min}}</view>
				</view>
				<view class="rightbox">
					现货发售
				</view>
			</view>
			<view class="goodsname">
				{{goodsinfo.goods_name}}
			</view>
			<view class="inventory">
				<view>运费：0.00</view>
				<view>{{goodsinfo.sales_actual||0}}人付款</view>
			</view>
		</view>
		<view style="height: 310rpx;"></view>
		<view class="pickup">
			<view class="stoke">
				<view class="stokename">库存</view>
				<view style="font-size: 28rpx;">还剩{{goodsinfo.stock_total||0}}件</view>
			</view>
			<!-- <view class="stoke" @click="openmodel(3)">
				<view class="stokename">选择</view>
				<view class="delivery">
					<view :class="[index==currone?'actdelivery':'deliveryitem']" v-for="(item,index) in deliverylist"
						:key="index" @click="handdelivery(index)">
						<view>{{item}}</view>
					</view>
				</view>
			</view> -->
		</view>
		<view class="guarantee">
			<view class="wx" @click="openmodel(2)">
				<image src="../../static/bz.png"></image>
				<view style="color: #FF8A9B;">微信交易保障</view>
			</view>
			<view class="wx">商家认证·交易监管·无忧售后·争议处理·快速发货</view>
		</view>
		<!-- 评论 -->
		<comment v-if="commentList.length>0" :num="commentCount" :list="commentList" @tocomment="tocomment"></comment>
		<!-- 推荐 -->
		<!-- <recommend></recommend> -->
		<!-- 商品详情 -->
		<view class="goodstext">
			<view class="titbox">
				<!-- <image src="../../static/image/tit.png"></image> -->
				<view>商品详情</view>
			</view>
			<view v-html="goodsinfo.content"></view>
		</view>
		<!-- 底部操作栏 -->
		<view style="height: 120rpx;"></view>
		<view class="navbut">
			<view class="actionnav" @click="tohome()" v-if="goodsinfo.is_points_discount!==0">
				<image src="../../static/sy1.png"></image>
				<view>首页</view>
			</view>
			<!-- <view class="actionnav" v-if="goodsinfo.is_points_discount==0">
				<image src="../../static/image/kf.png"></image>
				<button open-type="contact"></button>
				<view>客服</view>
			</view> -->
			<view class="actionnav" @click="tocollect(goodsinfo.is_collect)">
				<image v-if="goodsinfo.is_collect==0" src="../../static/sc.png"></image>
				<image v-else src="../../static/sc1.png"></image>
				<view>收藏</view>
			</view>
			<!-- 积分商品 -->

			<view class="actionnav" @click="toShoppingCartpage()" v-if="goodsinfo.is_points_discount==0">
				<image src="../../static/gwc2.png"></image>
				<!-- <image src="../../static/gwc1.png"></image> -->
				<view>购物车</view>
			</view>
			<view class="addact" v-if="goodsinfo.is_points_discount==0&&goodsinfo.stock_total!==0">
				<view class="car" @click="openmodel(1)">加入购物车</view>
				<view class="buy" @click="openmodel(4)">立即购买</view>
			</view>
			<view v-if="goodsinfo.stock_total==0" class="addact" style="width:100%">
				<view class="buy" style="width:100%;border-radius: 100rpx;">提醒补货</view>
			</view>
			<view v-if="goodsinfo.is_points_discount==1&&goodsinfo.stock_total!==0" class="addact" style="width:100%">
				<view class="buy" style="width:100%;border-radius: 100rpx;" @click="openmodel(5)">立即兑换</view>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<!-- modelindex  1是购物车,2为交易保障,3为取货方式,4为立即购买-->

			<modelinfo v-if="modelindex==1||modelindex==4||modelindex==5" :addorcar="addorcar" :jifen="jifen"
				:addressid="dzindex" @toShoppingCart="toShoppingCart" :info="goodsinfo" @close="close"
				@toorder="toorder"></modelinfo>
			<protection v-if="modelindex==2" @close="close"></protection>
			<!-- <pickup v-if="modelindex==3" :addresslist="addresslist" @close="close" :seftpick="seftpick" 
			 @addressid="addressid" :currone="currone" @deliverymethod="delivery_method"></pickup> -->
		</uni-popup>
	</view>
</template>

<script>
	import comment from '../../components/comment.vue'
	// import recommend from '../../components/recommend.vue'
	import modelinfo from '../../components/goodsbottom.vue'
	import protection from '../../components/protection.vue'
	// import pickup from '../../components/pickup.vue'
	export default {
		components: {
			comment,
			modelinfo,
			protection
		},
		data() {
			return {
				currone: null, //配送方式
				modelindex: null, //分辨弹窗，1是购物车,2为交易保障,3为取货方式
				id: '', //商品id
				goodsinfo: {}, //商品详情
				list: ['../../static/logo.png', '../../static/logo.png', '../../static/logo.png'],
				deliverylist: ['自提', '物流配送'],
				id: '',
				spec_type: '', //10为单规格 20为多规格
				bannerlist: [], //商品轮播图
				goodsinfo: null, //商品详情
				skuList: [], //多规格
				commentList: [], //评论列表
				commentCount: '', //评论列表数量
				content: '', //商品详情
				addorcar: null, //布尔值，判断弹窗内容是购物车(true),还是立即购买(false)
				jifen: null, //布尔值，判断弹窗商品是积分(true),还是非积分商品(false)
				addresslist: [], //地址列表
				dzindex: '', //默认地址id
				carlist: [],
				seftpick: '', //自提门店
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getinfo()
		},
		methods: {
			//配送方式选择
			handdelivery(index) {
				this.currone = index
			},
			open() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('bottom')
			},
			//判断打开哪个弹窗
			openmodel(n) {
				this.$http({ //是否绑定过社区
					url: '/api/Course/user_info',
				}).then(res => {
					this.myinfo = res.data
					////identity 1普通用户2志愿者3老师
					if (this.myinfo.community_id) {
						this.modelindex = n
						if (n == 1) {
							this.addorcar = true //弹窗内容是购物车
							this.jifen = false
						}
						if (n == 4) {
							this.addorcar = false
							this.jifen = false
							//判断弹窗内容是购物车(true),还是立即购买(false)
						}
						if (n == 5) { //n==5为积分商品
							this.addorcar = false
							this.jifen = true
							//判断弹窗内容是购物车(true),还是立即购买(false)
						}
						// console.log(this.addorcar,'this.addorcar')
						this.open()
					} else {
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/selectcommunity/selectcommunity'
							})
						}, 100)
					}
				})


			},
			close() {
				this.$refs.popup.close()
			},
			// openmodel(n) {
			// 	this.modelindex = n
			// 	this.open()
			// },
			// toShoppingCartpage(){
			// 	uni.switchTab({
			// 		url:'/pages/shoppingcar/shoppingcar'
			// 	})
			// },
			//获取商品详情
			//商品详情
			getinfo() {
				this.$http({
					url: '/api/Wechat/goodsDetail',
					data: {
						goods_id: this.id
					}
				}).then(res => {
					this.goodsinfo = res.data.goodsInfo

					this.spec_type = res.data.goodsInfo.spec_type //spec_type 10为单规格 20为多规格
					this.skuList = res.data.goodsInfo.skuList
					this.commentList = res.data.goodsComment.commentList
					this.commentCount = res.data.goodsComment.commentCount
					this.content = this.$replace_Rich_text(res.data.goodsInfo.content) //商品详情
					//spec_type 10为单规格 20为多规格
					if (this.spec_type == 20) {
						this.skuList.forEach(item => (
							this.bannerlist.push(item.image.full_url)
						))
					} else {
						this.bannerlist.push(res.data.goodsInfo.goods_images[0].full_url)
					}
				})
			},
			//收藏
			tocollect(n) {
				if (n == 0) {
					this.$http({
						url: '/api/Wechat/collectGoods',
						data: {
							goods_id: this.id,
							token: uni.getStorageSync('token'),
						}
					}).then(res => {
						this.getinfo()
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					})
				} else {
					const idlist = []
					idlist.push(+this.goodsinfo.collect_id)
					console.log(idlist, 'idlist')
					this.$http({
						url: '/api/Wechat/cancel_collect_goods',
						data: {
							id: idlist,
							token: uni.getStorageSync('token'),
						}
					}).then(res => {
						this.getinfo()
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					})
				}
			},
			toShoppingCartpage() {
				uni.navigateTo({
					url: '/pageshop/shoppingCart/shoppingCart'
				})
			},
			//立即购买去下单 
			toorder(result) {
				const list = []
				this.goodsinfo.info = result
				this.goodsinfo.carnum = result.goods_num[0]
				// this.goodsinfo.carnum = result.goods_num[0]
				list.push(this.goodsinfo)
				console.log(result, list, 'result')
				uni.navigateTo({
					url: '/pageshop/submitorder/submitorder?list=' + encodeURIComponent(JSON.stringify(list))
				})
			},
			//加入购物车
			toShoppingCart(result) {
				this.carlist = uni.getStorageSync('carlist') || []
				let find = this.carlist.find(item => item.id == this.goodsinfo.id && (this.goodsinfo.spec_type == 10 ?
					true : item.info.spec_id == result.spec_id))
				if (find) {
					find.carnum = (+find.carnum) + (+result.goods_num[0])
					// console.log(uni.getStorageSync('carlist'),'carlist',22,c,this.goodsinfo.carnum,this.carlist[c].carnum)
				} else {
					this.goodsinfo.info = result
					this.goodsinfo.carnum = result.goods_num[0]
					this.carlist.push(this.goodsinfo)
					// console.log(this.goodsinfo.carnum,'this.goodsinfo.carnum',result,uni.getStorageSync('carlist'),11)
				}
				uni.setStorageSync('carlist', this.carlist)
				this.close()
				uni.showToast({
					title: '加入购物车成功',
					icon: 'none'
				})
			},
			//跳转评论列表
			tocomment() {
				uni.navigateTo({
					url: '/pages/comment/comment?list=' + JSON.stringify(this.commentList)
				})
			},
			//回到首页
			tohome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			onShareAppMessage(res) {
				if (res.from === 'button') { // 来自页面内分享按钮
					console.log(res.target)
				}
				// return {
				//   title: "邀请好友",
				//   path: '/pages/index/index?pid='+this.id
				// }
			},
			onShareTimeline() {
				return {
					title: '快乐生活，就到众享幸福家',
					path: "/pageshop/goodsinfo/goodsinfo?id=" + this.id
				}
			},
			//提醒补货
			Replenishment() {
				this.$http({
					url: '/api/Wechat/stock_remind',
					data: {
						id: this.id
					}
				}).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #F7F7F7;
	}
</style>
<style lang="scss" scoped>
	.swiper {
		height: 750rpx;
		width: 100%;
	}

	.swiper-item {
		display: block;
		height: 750rpx;
		line-height: 750rpx;
		text-align: center;
		width: 100%;

		image {
			width: 100%;
			height: 750rpx;
		}
	}

	.pricebox {
		position: absolute;
		width: 650rpx;
		padding: 40rpx 20rpx;
		// height: 268rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		left: 50%;
		transform: translate(-50%, 0);
		margin: -40rpx auto 0 auto;
		z-index: 21;

		.numbox {
			display: flex;
			align-items: flex-end;
			justify-content: space-between;

			.leftbox {
				display: flex;
				align-items: flex-end;

				.originalprice {
					font-size: 48rpx;
					font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
					font-weight: normal;
					color: #FF8A9B;

					>text {
						font-size: 26rpx;
					}
				}

				.crossedprice {
					font-size: 26rpx;
					font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
					font-weight: normal;
					color: #888888;
					text-decoration: line-through;
				}
			}

			.rightbox {
				font-size: 24rpx;
				font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
				font-weight: normal;
				color: #888888;
			}
		}

		.goodsname {
			font-size: 30rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #222222;
			margin: 22rpx 0 30rpx 0;
			min-height: 120rpx;
			-webkit-line-clamp: 3;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis;
		}


		.inventory {
			display: flex;
			justify-content: space-between;
			font-size: 24rpx;
			font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
			font-weight: normal;
			color: #555555;
		}
	}

	.pickup {
		width: 650rpx;
		margin: 24rpx auto 24rpx auto;
		padding: 0rpx 20rpx;
		background-color: #FFF;
		height: 93rpx;
		border-radius: 20rpx;

		.stoke {
			height: 93rpx;
			display: flex;
			align-items: center;

			.stokename {
				font-size: 28rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #555555;
				margin-right: 30rpx;
			}

			.delivery {
				display: flex;
				align-items: center;

				.deliveryitem {
					width: fit-content;
					padding: 0 26rpx;
					height: 48rpx;
					line-height: 48rpx;
					border-radius: 24rpx;
					// border: 2rpx solid #CB9852;
					background: #F2F2F2;
					font-size: 28rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #222222;
					margin-right: 28rpx;
				}

				.actdelivery {
					width: fit-content;
					padding: 0 24rpx;
					height: 48rpx;
					line-height: 48rpx;
					border-radius: 24rpx;
					border: 2rpx solid #FF8A9B;
					// background: #F2F2F2;
					font-size: 28rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #FF8A9B;
					margin-right: 28rpx;
				}
			}
		}
	}

	.guarantee {
		width: 650rpx;
		margin: 0 auto 24rpx auto;
		height: 174rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 10rpx 20rpx;

		.wx {
			display: flex;
			height: 77rpx;
			align-items: center;
			font-size: 24rpx;
			font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
			font-weight: normal;
			color: #555555;

			image {
				width: 32rpx;
				height: 30rpx;
				margin-right: 26rpx;
			}
		}
	}

	.goodstext {
		width: 690rpx;
		background-color: #FFF;
		margin: 24rpx auto;

		.titbox {
			display: flex;
			width: 650rpx;
			margin: 0 auto;
			height: 114rpx;
			align-items: center;

			image {
				width: 8rpx;
				height: 34rpx;
				margin-right: 14rpx;
			}
		}
	}

	.navbut {
		position: fixed;
		width: 94%;
		padding: 0 3%;
		height: 110rpx;
		background: #FFFFFF;
		bottom: 0;
		display: flex;

		.actionnav {
			width: 20%;
			text-align: center;
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #444444;

			image {
				width: 56rpx;
				height: 56rpx;
				margin-top: 10rpx;
			}
		}

		.addact {
			width: 54%;
			display: flex;
			justify-content: center;
			margin: 10rpx auto;
			font-size: 30rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #FFFFFF;

			.car {
				width: 190rpx;
				height: 90rpx;
				background: linear-gradient(91deg, #F9AA5B 0%, #F9AA5B 100%);
				border-radius: 46rpx 0rpx 0rpx 46rpx;
				text-align: center;
				line-height: 90rpx;
			}

			.buy {
				width: 190rpx;
				height: 90rpx;
				background: linear-gradient(267deg, #FF8A9B 0%, #FF8A9B 100%);
				border-radius: 0rpx 46rpx 46rpx 0rpx;
				text-align: center;
				line-height: 90rpx;
				opacity: 1;
			}
		}
	}
</style>